<template>
    <div>
        
        <el-menu default-active="1-4-1" class="el-menu-vertical-demo"  :collapse="isCollapse"
        router
        unique-opened
        background-color="#334157"
        text-color="#fff"
        active-text-color="#fff"
        >
            <div class="logo">
                <i class="el-icon-s-promotion"></i>
            </div>
            <el-submenu v-for="menu in allMenu" :key="menu.menuid" :index="menu.menuname">
                <template slot="title">
                    <i :class="menu.icon"></i>
                    <span slot="title">{{ menu.menuname }}</span>
                </template>
                <el-menu-item-group>
                    <el-menu-item v-for="childMenu in menu.menus" :key="childMenu.url" :index="'/'+childMenu.url">{{ childMenu.menuname}}</el-menu-item>
                </el-menu-item-group>
            </el-submenu>
            
        </el-menu>
    </div>
</template>

<script>
export default {
    name:'leftNav',
    data() {
      return {
        isCollapse: false,
        allMenu:[]
      };
    },
    created(){
        let res = {
            success: true,
            data: [
                {
                menuid: 1,
                icon: 'el-icon-s-cooperation',
                menuname: '基础管理',
                url: null,
                menus: [
                    {
                    menuid: '2',
                    icon: 'el-icon-s-goods',
                    menuname: '商品管理',
                    url: 'goods/Goods',
                    menus: null
                    }
                ]
                },
                {
                menuid: 33,
                icon: 'el-icon-s-order',
                menuname: '订单管理',
                url: null,
                menus: [
                    {
                    menuid: 34,
                    icon: 'el-icon-shopping-cart-full',
                    menuname: '交易订单',
                    url: 'pay/Order',
                    menus: null
                    }
                ]
                },
                {
                menuid: 71,
                icon: 'el-icon-s-platform',
                menuname: '系统管理',
                url: null,
                menus: [
                    {
                    menuid: 72,
                    icon: 'el-icon-user-solid',
                    menuname: '用户管理',
                    url: 'system/user',
                    menus: null
                    },
                    ]
                },
                {
                menuid: 150,
                icon: 'el-icon-s-marketing',
                menuname: '图表',
                url: null,
                menus: [
                    {
                    menuid: 159,
                    icon: 'el-icon-s-claim',
                    menuname: '数据可视化',
                    url: 'charts/statistics',
                    menus: null
                    }
                ]
                }
            ],
            msg: 'success'
        }
        this.allMenu = res.data
    },
    mounted(){
        this.$bus.$on("toggle",(data)=>{
            console.log(data);
            this.isCollapse = data
        })
    },
    methods: {
      handleOpen(key, keyPath) {
        console.log(key, keyPath);
      },
      handleClose(key, keyPath) {
        console.log(key, keyPath);
      }
    }
}
</script>

<style scoped>
.el-menu-vertical-demo:not(.el-menu--collapse) {
    width: 240px;
    min-height: 400px;
    border: none!important
  }
  .logo{
    height: 40px;
    color:#999;
    font-size: 40px;
    text-align: center;
    padding: 20px 0;
  }
</style>